<template>
  <div id="hello">
    <CocosGame>
      <Scene1 v-if="index===1"/>
      <Scene2 v-if="index===2"/>
      <Scene3 v-if="index===3"/>
      <Scene v-if="index===0"/>
    </CocosGame>
  </div>
  <div id="button" @click="prevPage">
      上一张
  </div>
  <div id="button" @click="nextPage">
      下一张
  </div>
</template>

<script>

import {CocosGame} from "./cocos";
// import CocosGame from "../components/CocosGame";
import Scene1 from "./scene1";
import Scene2 from "./scene2";
import Scene3 from "./scene3";
import Scene from "./polygon/Scene";

const TOTAL = 4;

export default {
  name: "HelloWorld",
  components: {
    CocosGame,Scene1,Scene2,Scene,Scene3,
  },
  data() {
    return {
      index: 2,
    };
  },
  mounted() {
    // setInterval(() => {
    //   let idx = this.index + 1;
    //   if(idx>2){
    //     idx = 0;
    //   }
    //   this.index = idx;
    // }, 10000);
  },
  methods: {
    prevPage() {
        // console.log("prevPage");
        let idx = this.index - 1;
        if(idx<0){
          idx = TOTAL-1;
        }
        this.index = idx;
    },
    nextPage() {
        // console.log("nextPage");
        let idx = this.index + 1;
        if(idx>=TOTAL){
          idx = 0;
        }
        this.index = idx;
    },
  },
};
</script>

<style>
#hello {
  width: 960px;
  height: 720px;
  overflow: hidden;
}
#button {
  width: 200px;
  height: 40px;
  background: #193669;
  color: #ff0;
  line-height: 40px;
  display: table-cell;
}
</style>
